<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

        /*设定纸张大小*/
        /* A4纸 */
        @page{
            size:a4
        }
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .Wrap{
            width: 655px;
            /*margin: 0 auto;*/
        }
        .codeView{
            font-size: 12px;
            color: #333333;
        }
        .header{
            width: 100%;
            line-height: 50px;
            color: #666666;
            margin-bottom: 20px;
            /*padding: 0 10px;*/
        }
        .header h2{
            display: inline-block;
            font-size: 20px;
            /*float: left;*/
        }
        .header .text{
            font-size: 14px;
            /*font-weight: bold;*/
            float: left;
        }
        .b-header{
            font-size: 18px;
            color: #666666;
            text-align: center;
            line-height: 40px;
        }
        .b-header .head-con{
            /*display: inline-block;*/
            /*margin: 0 auto;*/
            text-align: center;
        }
        .b-header .head-con .pic{
            float: left;
            width: 44px;
            margin-right: 6px;
        }
        .b-header .head-con .pic img{
            display: inline-block;
            width: 100%;
        }
        .b-header .head-con .tHeader{
            /*float: left;*/
        }
        .fourInfos{
            margin-bottom: 36px;
            text-align: center;
            margin-top: 30px;
        }
        .fourInfos ul{
            display: inline-block;
        }
        .fourInfos ul li{
            position: relative;
            float: left;
            padding: 0 24px;
        }
        .fourInfos ul li:first-child{
            padding-left: 0;
        }
        .fourInfos ul li:last-child{
            padding-right: 0;
        }
        .fourInfos ul li::before{
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            height: 50px;
            margin-top: -28px;
            border-left: 2px solid #e6e6e6;
        }
        .fourInfos ul li:first-child{
        }
        .fourInfos ul li:first-child::before{
            display: none;
        }
        .fourInfos ul li .val{
            font-size: 26px;
            line-height: 50px;
            color: #333333;
        }
        .fourInfos ul li label{
            font-size: 14px;
            color: #666666;
        }

        .inspection {
            margin-bottom: 15px;
        }
        .inspection .tit{
            font-size: 14px;
            line-height: 16px;
            margin-bottom: 11px;
            color: #666666;
        }
        .inspection .val{
            font-size: 13px;
            height: 40px;
            line-height: 18px;
            color: #333333;
        }
        .b-content{
            width: 100%;
            border: solid 10px #cccccc;
            padding: 5px;
        }
        .con-border{
            border: solid 2px #cccccc;
            padding: 20px 30px 0;
        }
        .con-header{
            font-size: 26px;
            text-align: center;
            line-height: 70px;
            color: #333;
            border-bottom: dashed  2px #cccccc;
            margin-bottom: 30px;
        }
        .table{
            width: 100%;
            margin-bottom: 20px;
            /*padding: 0 0.3rem;*/
            padding-top: 10px;
        }
        .table table{
            width: 100%;
            border-collapse: collapse;
        }
        .table table td{
            width: 25%;
            font-size: 16px;
            color: #666666;
            height: 30px;
            line-height: 30px;
            border: solid 1px #ccc;
            padding: 5px;
            text-align: center;
        }
        .table td div{
            line-height: 24px;
        }

        .table-50{
            width: 100%;
            margin-bottom: 30px;
        }

        .table-50 table{
            width: 100%;
            border-collapse: collapse;
            page-break-before: always;
            page-break-after: always;
            page-break-inside: avoid;
        }
        .table-50 td{
            width: 50%;
            font-size: 16px;
            color: #666666;
            /*height: 40px;*/
            line-height: 24px;
            border: solid 1px #ccc;
            padding: 5px 10px;
            text-align: center;
            vertical-align: text-bottom;
        }
        .table-50 td div{
            line-height: 24px;
        }
        .table-50 td .pic {
            width: 230px;
            height: 180px;
            overflow: hidden;
        }
        .table-50 td .pic img{
            display: block;
            height: 100%;
            margin: 0 auto;
        }
        .table-50 td .txt{
            height: 40px;
            line-height: 40px;
        }
        .table-50 td .txt span{
            float: left;
            margin-right: 8px;
        }
        .table-50 td .txt .icon{
            float: left;
            width: 19px;
            height: 19px;
            padding: 10px 0;
        }
        .table-50 td .txt .icon img{
            display: block;
            width: 100%;
        }
        .table-50 thead td {
            border: solid 0px #ccc;
        }
        .table-50 thead td .con-header{
            line-height: 70px;
        }

        .clearfix:after{
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .listCar{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .listCar .listItem{
            width: 253px;
            float: left;
            margin-bottom: 10px;
            padding: 0 20px;
        }
        .listCar .listItem dt{
            position: relative;
            margin-bottom: 20px;
        }
        .listCar .listItem dt img{
            display: block;
            width: 100%;
        }
        .listCar .listItem dt .name{
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            color: #ffffff;
            padding: 0 10px;
            /*text-align: center;*/
            line-height: 24px;
            height: 24px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .listCar .listItem dd{
            padding: 0 20px;
            font-size: 16px;
            line-height: 40px;
            border-bottom: dashed 1px #cccccc;
            color: #666666;
        }
        .listCar .listItem dd.firstChild{
            border-top: dashed 1px #cccccc;
        }
        .listCar .listItem dd div.left{
            float: left;
        }
        .listCar .listItem dd div.lBc{
            float: right;
        }
        .Analysis{
            width: 100%;
            /*display: flex;
            flex-wrap: wrap;*/
            /*padding: 0 20px;*/
            /*justify-content: space-between;*/
        }
        .Analysis .listItem{
            /*width: 253px;*/
            padding: 0 20px;
            margin-bottom: 10px;
            /*float: left;*/
        }
        /*.Analysis .listItem:nth-child(odd){
          float: left;
        }
        .Analysis .listItem:nth-child(even){
          float: right;
        }*/
        .Analysis .listItem table{
            width: 100%;
            border-collapse: collapse;
            page-break-before: auto;
            page-break-after: auto;
            page-break-inside: avoid;
        }
        .Analysis .listItem table td{
            width: 50%;
        }
        .Analysis .listItem table td img{
            display: block;
            width: 100%;
        }
        .Analysis .listItem .item-header{
            line-height: 40px;
            height: 40px;
            font-size: 16px;
            color: #666666;
            border-bottom: dashed 1px #cccccc;
            padding: 0 10px;
            text-align: center;
        }
        .Analysis .listItem .nextCon{
            padding: 10px 0;
            line-height: 22px;
            font-style: 14px;
            color: #666666;
        }
        .legalEffect div{
            font-size: 16px;
            color: #666666;
            line-height: 22px;
            margin-bottom: 10px;
            /*font-weight: bold;*/
        }
        .dateView{
            /*padding-left: 200px;*/
            height: 188px;
            padding: 50px 0 50px 200px;
        }
        .dateView table{
            width: 100%;
            height: 88px;
            border-collapse: collapse;
            page-break-before: auto;
            page-break-after: auto;
            page-break-inside: avoid;
        }
        .dateView table td{
            height: 88px;
            position: relative;
        }
        .dateView .dateItem{
            font-size: 16px;
            line-height: 44px;
            color: #666666;
        }
        .dataTo{
            margin-bottom: 10px;
        }
        .dataTo .dateItem{
            font-size: 16px;
            line-height: 32px;
            color: #666666;
        }
        .dateView .pic{
            width: 180px;
            height: 180px;
            position: absolute;
            top: 50%;
            right: 80px;
            margin-top: -90px;
        }
        .dateView .pic img{
            display: block;
            width: 100%;
        }
        .tableFu{
            width: 506px;
        }
        .tableFu table{
            width: 506px;
            border-collapse: collapse;
        }
        .tableFu table td{
            font-size: 14px;
            color: #666666;
            line-height: 20px;
            border: solid 1px #ccc;
            padding: 5px;
            display: table-cell;
            vertical-align: middle;
        }
        .tableFu table td.lCon{
            width: 24px;
            text-align: center;
        }
        .logo{
            width: 100%;
            height: 67px;
            position: relative;
        }
        .logoPic{
            width: 180px;
            height: 67px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
        .logo img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body style="font-family: SimSun;line-height:1">
<div class="Wrap">
    <div class="logo">
        <div class="logoPic">
            <img src="${huoyan360!''}" />
        </div>
    </div>
    <div class="header clearfix">
        <h2>狮桥二手车专业检测报告（本定价报告仅用于狮桥集团）</h2>
    </div>
    <div class="wrapBody">
        <div class="b-header clearfix">
            <div class="head-con clearfix">
                <!-- <div class="pic"><img src="" /></div> -->
                <div class="tHeader">${prdNm!''}</div>
            </div>
        </div>
        <div class="fourInfos">
            <ul>
                <li>
                    <label>收购价(万)</label>
                    <div class="val">${purchasingPrice!''}</div>
                </li>
                <li>
                    <label>零售价(万)</label>
                    <div class="val">${slPrice!''}</div>
                </li>
                <li>
                    <label>新车指导价(万)</label>
                    <div class="val">${styleMsrp!''}</div>
                </li>
            </ul>
        </div>
        <div class="b-content">
            <div class="con-border">
            <#if carBase??>
              <div class="con-header">
                  车辆基本信息
              </div>
              <div class="table">
                  <table>
                      <tbody>
                      <tr>
                              <#list carBase?sort_by("sort") as p>
                                  <td>${p["key"]}</td>
                                  <td>${p["value"]}</td>
                                  <#if (p_index+1)%2 == 0>
                                     </tr>
                                      <#if p_has_next>
                                     <tr>
                                      </#if>
                                  <#else>
                                      <#if !p_has_next>
                                        <td></td><td></td></tr>
                                      </#if>
                                  </#if>
                              </#list>
                      </tbody>
                  </table>
              </div>
            </#if>
            <#if carConfig??>
              <div class="con-header">
                  车辆配置信息
              </div>
              <div class="table">
                  <table>
                      <tbody>
                      <tr>
                              <#list carConfig?sort_by("sort") as p>
                                  <td>${p["key"]}</td>
                                  <td>${p["value"]}</td>
                                  <#if (p_index+1)%2 == 0>
                                     </tr>
                                      <#if p_has_next>
                                     <tr>
                                      </#if>
                                  <#else>
                                      <#if !p_has_next>
                                        <td></td><td></td></tr>
                                      </#if>
                                  </#if>
                              </#list>
                      </tbody>
                  </table>
              </div>
            </#if>
            <#if carDection??>
                <div class="table-50">
                    <table>
                        <thead>
                        <tr>
                            <td colspan="2">
                                <div class="con-header">
                                    车辆检测明细
                                </div>
                            </td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                 <#if LeftFront45 ??>
                                         <div class="pic"><img src="${LeftFront45!''}" /></div>
                                 </#if>
                                <div class="txt">
                                    <span>照片(左前45°)</span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                            <td>
                                   <#if rightAfter45 ??>
                                         <div class="pic"><img src="${rightAfter45!''}" /></div>
                                   </#if>
                                <div class="txt">
                                    <span>照片(右后45°) </span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                   <#if neiShi ??>
                                         <div class="pic"><img src="${neiShi!''}" /></div>
                                   </#if>
                                <div class="txt">
                                    <span>照片(内饰) </span>
                                    <div class="icon"><img src="" /></div>
                                </div>
                            </td>
                            <td>
                                   <#if houQiao ??>
                                         <div class="pic"><img src="${houQiao!''}" /></div>
                                   </#if>
                                <div class="txt">
                                    <span>照片(后桥)</span>
                                    <div class="icon"><img src="" /></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                     <#if guJia ??>
                                         <div class="pic"><img src="${guJia!''}" /></div>
                                     </#if>
                                <div class="txt">
                                    <span>照片(前围骨架) </span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                            <td>
                                     <#if faDongJi ??>
                                         <div class="pic"><img src="${faDongJi!''}" /></div>
                                     </#if>
                                <div class="txt">
                                    <span>照片(发动机) </span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 <#if banHuang ??>
                                       <div class="pic"><img src="${banHuang!''}" /></div>
                                 </#if>
                                <div class="txt">
                                    <span>照片(左后板簧)</span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                            <td>
                                 <#if bianSuXiang ??>
                                       <div class="pic"><img src="${bianSuXiang!''}" /></div>
                                 </#if>
                                <div class="txt">
                                    <span>照片(变速箱)</span>
                                    <div class="icon"><img src=" " /></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                                <#list carDection?sort_by("sort") as p>
                                    <td>
                                        <div class="txt">
                                            <#if p["imgPath"] ??>
                                                <div class="pic"><img src="${p["imgPath"]}" /></div>
                                            <#else><div></div>
                                            </#if>
                                            <span>${p["key"]}</span>
                                            <#if p["value"] ??>
                                                <#if p["value"] == '0'><div class="icon"><img src="${successPath}" /></div><#else><div class="icon"><img src="${warningPath}" /></div></#if>
                                            <#else><div style="float:right"><span>无此项</span></div>
                                            </#if>
                                        </div>
                                    </td>
                                    <#if (p_index+1)%2 == 0>
                                       </tr>
                                        <#if p_has_next>
                                       <tr>
                                        </#if>
                                    <#else>
                                        <#if !p_has_next>
                                          <td></td></tr>
                                        </#if>
                                    </#if>
                                </#list>
                        </tbody>
                    </table>
                </div>
            </#if>
                <div class="con-header">
                    车辆售价影响分析
                </div>
                <div class="Analysis clearfix">
                    <div class="listItem">
                        <div class="item-header">新车价</div>
                        <div class="nextCon" style="font-style: 14px;">
                            二手车销售时，需要对照当前新车价格，而不是首次销售时的价格，如 果新车价格下跌，二手车售价也会相应下跌。
                        </div>
                    </div>
                    <div class="listItem">
                        <div class="item-header">品牌</div>
                        <div class="nextCon" style="font-style: 14px;">热门的品牌及车型，保有量较高，市场认可度高，但是已经停产保值率一般。</div>
                    </div>
                    <div class="listItem">
                        <div class="item-header">车龄</div>
                        <div class="nextCon" style="font-style: 14px;">12个月内，车辆处于平稳折价期内，折价幅度平缓，车辆年限越短车辆 价格越高。</div>
                    </div>
                    <div class="listItem">
                        <div class="item-header">车辆配置</div>
                        <div class="nextCon" style="font-style: 14px;">发动机品牌马力、变速箱品牌换挡形式、驱动桥品牌型号、上装内部尺 寸、舒适性/安全性等配置，配置越高二手价格越高。</div>
                    </div>
                    <div class="listItem">
                        <div class="item-header">销售季节</div>
                        <div class="nextCon" style="font-style: 14px;">最后销售旺季和淡季二手车售价也会不同，主要由供需关系来决定。</div>
                    </div>
                    <div class="listItem">
                        <div class="item-header">价格曲线</div>
                        <table>
                            <tbody>
                            <tr>
                                <td><img src="${FuturePath!''}" /></td>
                                <td><img src="${HistoryPath!''}" /></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="con-header">
                    车况等级${carClassResult}
                </div>
                <div class="tableFu">
                    <table>
                    <tr>
                        <td rowspan="${carAcc?size+carCon?size+4}" class="lCon">车 辆 级 别</td>
                        <td rowspan="${carAcc?size}" class="lCon">事 故 等 级</td>
                <#list carAcc?sort_by("sort") as p>
                    <#if p_index != 0>
                  <tr>
                    </#if>
                      <td class="lCon">${p["sign"]}</td>
                      <td><div>${p["optionContent"]}</div></td>
                  </tr>
                </#list>
                    <tr>
                        <td rowspan="${carCon?size}" class="lCon">车 况 等 级</td>
                <#list carCon?sort_by("sort") as p>
                    <#if p_index != 0>
                  <tr>
                    </#if>
                      <td class="lCon">${p["sign"]}</td>
                      <td><div>${p["optionContent"]}</div></td>
                  </tr>
                </#list>
                        <tr>
                            <td rowspan="4" class="lCon">其 他</td>
                            <td class="lCon">火 烧 车</td>
                            <td><div>根据机舱线速或塑料部件以及烟熏痕迹判断。</div></td>
                        </tr>
                        <tr>
                            <td class="lCon">泡 水 车</td>
                            <td><div>无论严重泡水还是轻微泡水，统一选择此项。</div></td>
                        </tr>
                        <tr>
                            <td class="lCon">事 故 车</td>
                            <td><div>车辆更换过驾驶室、或者全车骨架发生一处或多处一般/严重性损伤或修复。</div></td>
                        </tr>
                        <tr>
                            <td class="lCon">拼 装 车</td>
                            <td><div>再无生产资质的作坊使用了旧机动车零部件或全新零部件拼凑起来的汽车。<br/>可以从车辆的车架号是否有涂抹篡改，底盘与驾驶室的新旧差异和各机械<br/>部件的装配工艺等基本特征判断出来。</div></td>
                        </tr>
                    </table>
                </div>
                <div class="con-header">
                    法律效力
                </div>
                <div class="dataTo">
                    <div class="dateItem">任务提交时间：${nowDate}</div>
                    <div class="dateItem">定价完成时间：${mdfTm}</div>
                </div>
                <div class="legalEffect">
                    <div>一、本鉴定评估结果，基于该评估任务中，狮桥采集的车辆照片、 视频所表现的车辆状态，有效期为检测定价报告生成后，车辆状态未发生改 变的10个自然日，即至${endDate}日止；</div>
                    <div>二、本鉴定评估结果中的价格趋势，基于车辆正常行驶，且无重大事故的情 况下进行预估，容错率为8%。</div>
                    <div>三、在评估结果有效期内，被评估车辆发生交通事故或发生其他影响车辆价 值的状况，对车辆估价结果产生明显影响时，车辆的价值应重新进行评估。</div>
                </div>
                <div class="dateView">
                    <table>
                        <tr>
                            <td>
                                <div class="dateItem">任务提交时间：${nowDate}</div>
                                <div class="pic">
                                    <img src="${noBurnPath!''}" />
                                </div>
                                <div class="dateItem">定价完成时间：${mdfTm}</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>